<script setup lang="ts">
import AnimationDialog from '@/components/Dialog/AnimationDialog.vue'
import { onMounted, reactive, ref } from 'vue'

const dialogLT = ref(null)
const dialogInfoLT = {
  title: '左上测试弹窗', // 标题
  style: 'lt',
  width: '30%', // 宽度
}

const dialogLM = ref(null)
const dialogInfoLM = {
  title: '左中测试弹窗', // 标题
  style: 'lm',
  width: '50%', // 宽度
}

const dialogLB = ref(null)
const dialogInfoLB = {
  title: '右下测试弹窗', // 标题
  style: 'lb',
  width: '50%', // 宽度
}

const dialogRT = ref(null)
const dialogInfoRT = {
  title: '右上测试弹窗', // 标题
  style: 'rt',
  width: '30%', // 宽度
}

const dialogRM = ref(null)
const dialogInfoRM = {
  title: '右中测试弹窗', // 标题
  style: 'rm',
  width: '50%', // 宽度
}

const dialogRB = ref(null)
const dialogInfoRB = {
  title: '右下测试弹窗', // 标题
  style: 'rb',
  width: '50%', // 宽度
}

const dialogCT = ref(null)
const dialogInfoCT = {
  title: '中上测试弹窗', // 标题
  style: 'ct',
  width: '50%', // 宽度
}
const dialogCB = ref(null)
const dialogInfoCB = {
  title: '中下测试弹窗', // 标题
  style: 'cb',
  width: '50%', // 宽度
}

const showLT = () => {
  dialogLT.value.changeDialogVisible(true)
}
const showLM = () => {
  dialogLM.value.changeDialogVisible(true)
}
const showLB = () => {
  dialogLB.value.changeDialogVisible(true)
}
const showRT = () => {
  dialogRT.value.changeDialogVisible(true)
}
const showRM = () => {
  dialogRM.value.changeDialogVisible(true)
}
const showRB = () => {
  dialogRB.value.changeDialogVisible(true)
}
const showCT = () => {
  dialogCT.value.changeDialogVisible(true)
}
const showCB = () => {
  dialogCB.value.changeDialogVisible(true)
}
</script>

<template>
  <div class="box">
    <div class="left">
      <el-button @click="showLT()"> 左上测试弹窗 </el-button>
      <el-button @click="showLM()"> 左中测试弹窗 </el-button>
      <el-button @click="showLB()"> 左下测试弹窗 </el-button>
    </div>

    <div class="center">
      <el-button @click="showCT()"> 中上测试弹窗 </el-button>
      <el-button @click="showCB()"> 中下测试弹窗 </el-button>
    </div>

    <div class="right">
      <el-button @click="showRT()"> 右上测试弹窗 </el-button>
      <el-button @click="showRM()"> 右中测试弹窗 </el-button>
      <el-button @click="showRB()"> 右下测试弹窗 </el-button>
    </div>

    <AnimationDialog ref="dialogLT" :dialogInfo="dialogInfoLT">
      <div class="body-box">这里是测试页面左上测试弹窗</div>
    </AnimationDialog>
    <AnimationDialog ref="dialogLM" :dialogInfo="dialogInfoLM">
      <div class="body-box">这里是测试页面左中测试弹窗</div>
    </AnimationDialog>
    <AnimationDialog ref="dialogLB" :dialogInfo="dialogInfoLB">
      <div class="body-box">这里是测试页面左下测试弹窗</div>
    </AnimationDialog>

    <AnimationDialog ref="dialogCT" :dialogInfo="dialogInfoCT">
      <div class="body-box">这里是测试页面中上测试弹窗</div>
    </AnimationDialog>
    <AnimationDialog ref="dialogCB" :dialogInfo="dialogInfoCB">
      <div class="body-box">这里是测试页面中下测试弹窗</div>
    </AnimationDialog>

    <AnimationDialog ref="dialogRT" :dialogInfo="dialogInfoRT">
      <div class="body-box">这里是测试页面右上测试弹窗</div>
    </AnimationDialog>
    <AnimationDialog ref="dialogRM" :dialogInfo="dialogInfoRM">
      <div class="body-box">这里是测试页面右中测试弹窗</div>
    </AnimationDialog>
    <AnimationDialog ref="dialogRB" :dialogInfo="dialogInfoRB">
      <div class="body-box">这里是测试页面右下测试弹窗</div>
    </AnimationDialog>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.left,
.center,
.right {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.left {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}
.right {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
}
.center {
  position: fixed;
  top: 0;
  left: 48%;
  bottom: 0;
}
.body-box {
  height: 300px;
}
</style>
